<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 练习：1 圆形 2.正三角形
			思路1：宽高与边框倒角一致						 
						  				*/
			div#circle{
				width: 400px;
				height: 400px;
				border: 1px solid red;
				border-radius: 200px;
				/* 边框阴影 box-shadow 属性 */
				box-shadow: 5px 5px 5px 5px red;
			}	
			/* 思路2：div#triangle  css中：抓到div   【斜线】
						  	左边框：50像素实线红色
						  	右边框：50像素实线黄色
						  	下边框：50像素实线黑色
						  	注意：先别加宽高  transparent 透明色 */
			div#triangle{
				width: 0;
				/* border-left: 50px solid transparent;
				border-right: 50px solid transparent;
				border-bottom: 50px solid black; */
				/* 两行：倒三角，倒三角是蓝色，透明度.3 
				提醒：所有边框：50px solid transparent
				 上边框颜色改为蓝色 0，0，255*/
				border: 50px solid transparent;
				border-top-color:rgba(0, 0, 255, .3);
			}
			/* outline 边框轮廓  只针对input 元素*/	
			input{
				outline: 1px solid blue;
			}
			/* 实际应用：通配选择器 去掉轮廓
			 *{ outline：0;}
			 
			 */
		</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		边框：<input type="text">
	</body>
</html>